<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <!--<script type="text/javascript">-->
        <!--const siteUrl = "./",-->
        <!--musicMp3 = "bgm.mp3"-->
    <!--</script>-->

    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/music.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <title>人人争做护旗手</title>
</head>
<body>

<div class="pop-bg">
    <div class="pop-box">
        <img class="pop-close" src="images/pop_close_icon.png" alt="" />
        <div class="rule-title"><img src="images/rule_title.png" alt="" /></div>
        <div class="pop-content-box">
            <h1>活动时间：</h1>
            <p>10月1日-10月03日</p>
            <h1>游戏玩法：</h1>
            <p>向上滑动屏幕，控制红旗上升，使用道具驱赶出现的障碍物，直至红旗到达顶端即挑战成功，若红旗被障碍物攻击，则游戏失败。</p>
            <h1>游戏奖励：</h1>
            <p>1 成功护旗的玩家可获得100积分奖励，每人活动期间仅限获得1次。<br />
                2 成功护旗的玩家可获1次抽奖机会，获奖率100%，每天仅可享有1次抽奖机会。<br />
                3 奖励将即时发放，请留意中石化BP微油站微信消息通知。</p>
        </div>
        <div class="pop-tips-box">*最终解释权在法律允许范围内，归中石化碧辟所有。</div>
    </div>
</div>

<div class="page index">
    <img class="index-bg" src="images/index_bg.jpg" width="100%" alt="">
    <img class="logo" src="images/logo.png" alt="">
    <div class="slogan animated fadeInDown">
        <img class="heart animated heartBeat delay-1s" src="images/slogan_heart_img.png" alt="">
    </div>
    <div class="index-bottom">
        <img class="bottom-bg" src="images/index_bottom_bg.png" width="100%" alt="">
        <button class="game-start"></button>
        <div class="rule-btn"></div>
        <div class="swiper-container roll-box">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><div class="roll-box-item">***获得200积分</div></div>
                <div class="swiper-slide"><div class="roll-box-item">******获得200积分</div></div>
                <div class="swiper-slide"><div class="roll-box-item">***获得200积分</div></div>
                <div class="swiper-slide"><div class="roll-box-item">******获得200积分</div></div>
                <div class="swiper-slide"><div class="roll-box-item">***获得200积分</div></div>
            </div>
        </div>
    </div>
</div>

<div class="page results">
    <div class="results-box">
        <div class="failed-box" id="failed">
            <img class="failed-text" src="images/failed_text_img.png" alt=""/>
            <button class="play-again"></button>
        </div>
        <div class="success-box" id="success">
            <img class="title" src="images/success_title.png" alt="">
            <div class="jifen-box">获得100积分奖励</div>
            <div class="rank-box">
                <p>今天，你成为了</p>
                <p>第<span>1000</span>名</p>
            </div>
            <div class="title-name-box">
                <p>光荣升旗手,特此赐予你</p>
                <p><span>“中华升旗小能手”</span>称号</p>
                <p>还可享有<b>1</b>次抽奖机会</p>
            </div>
            <button class="go-lottery"></button>
        </div>
        <div class="congratulations-box" id="congratulations">
            <img class="title" src="images/congratulations_title.png" alt="">
            <div class="gift-box">
                <!--<img src="images/gift_jifen.png" width="100%" alt="" />-->
                <!--<img src="images/gift_ticket_10.png" width="100%" alt="" />-->
                <!--<img src="images/gift_ticket_100.png" width="100%" alt="" />-->
                <img src="images/gift_water.png" width="100%" alt="" />
            </div>
            <div class="results-content-box">
                <p>作为一名光荣的护旗手</p>
                <p>今天的你英姿飒爽</p>
                <p>展现了旗手新风采</p>
            </div>
            <button class="go-choose"></button>
            <div class="choose-tipes-box">点击生成你的护旗手海报</div>
        </div>
        <div class="choose-box" id="choose">
            <div class="sex-choose-box">
                <div class="choose-title">您的性别</div>
                <div class="choose-box-content flex">
                    <div class="choose-sex-item" id="male">
                        <div class="choose-sex-male"></div>
                        <p>先生</p>
                    </div>
                    <div class="choose-sex-item" id="female">
                        <div class="choose-sex-female"></div>
                        <p>女士</p>
                    </div>
                </div>
            </div>
            <div class="add-choose-box">
                <div class="choose-title">前往地点</div>
                <div class="choose-box-content flex">
                    <button class="choose-add" id="bj">北京</button>
                    <button class="choose-add" id="hk">香港</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="page poster">
    <div>
        <img id="target" width="100%" alt="">
        <div class="poster-box" id="box">
            <img id="posterBg" src="images/poster_bj_female.jpg" width="100%" alt="" />
            <div class="user-info-box flex">
                <div class="user-img-box"><img id="userImg" src="images/user_demo.jpg" alt="" /></div>
                <div class="user-info-content">
                    <p>我是 <span id="userName">孟毛毛</span></p>
                    <p>我是第 <strong>1000</strong> 名升旗手</p>
                    <p>被赐予 <strong>中华升旗小能手</strong> 名号</p>
                </div>
            </div>
            <img class="qr-code" src="images/qr_code.jpg" alt="">
        </div>
        <div class="poster-tips">可长按屏幕保存后分享海报</div>
    </div>
</div>

<div class="page game">
    <div class="game-bg-box">
        <img class="tiananmen" src="images/tiananmen_img.png" width="100%" alt=""/>
        <img class="tree" src="images/tree_img.png" width="100%" alt=""/>
        <div class="cloud-box">
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="flag-box"><img src="images/flag_top.png" width="100%" alt=""/></div>
    <div class="flag" id="flag"></div>
    <div class="game-tips-box">
        <img id="tipsStart" src="images/game_start_tips.png" width="100%" alt=""/>
        <img id="tipsPointOne" src="images/game_start_tips1.png" width="100%" alt=""/>
        <img id="tipsPointTwo" src="images/game_start_tips2.png" width="100%" alt=""/>
        <img id="tipsPointThree" src="images/game_start_tips3.png" width="100%" alt=""/>
    </div>
    <div class="fan item"></div>
    <div class="glove item"></div>
    <div class="complete-box animated bounceIn">
        <img id="completeText1" src="images/complete_box_text1.png" alt=""/>
        <img id="completeText2" src="images/complete_box_text2.png" alt=""/>
        <img id="completeText3" src="images/complete_box_text3.png" alt=""/>
    </div>
</div>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript" type="text/javascript" src="js/html2canvas.min.js"></script>

<script type="text/javascript">
    $(document).ready(function (e) {
        //var vConsole = new VConsole();
        let mySwiper = new Swiper ('.swiper-container', {
            slidesPerView: 'auto',
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 1000,
                disableOnInteraction: false,
                waitForTransition: false,
            },
        });

        let sexChoose = '';
        let addChoose = '';
        $('.choose-sex-item').bind('touchstart', function (e) {
            $('.choose-sex-item').removeClass('onthis');
            $(this).addClass('onthis');
            sexChoose = $(this).attr('id');
            console.log(sexChoose);
            if (addChoose != '') {
                $('.results').hide();
                $('#posterBg').attr('src','images/poster_'+ addChoose +'_'+ sexChoose +'.jpg');
                $('.poster').addClass('flex');
                setTimeout(takeScreenshot,500);
            }
        });

        $('.choose-add').bind('touchstart', function (e) {
            $('.choose-add').removeClass('onthis');
            $(this).addClass('onthis');
            addChoose = $(this).attr('id');
            console.log(addChoose);
            if (sexChoose != '') {
                $('.results').hide();
                $('#posterBg').attr('src','images/poster_'+ addChoose +'_'+ sexChoose +'.jpg');
                $('.poster').addClass('flex');
                setTimeout(takeScreenshot,500);
            }
        });

        $('.go-choose').bind('touchstart', function (e) {
            $('#congratulations').hide();
            $('#choose').show();
        });

        $('.go-lottery').bind('touchstart', function (e) {
            $('#success').hide();
            $('#congratulations').show();
        });

        $('.rule-btn').bind('touchstart', function (e) {
            $('.pop-bg').addClass('show');
            $('.pop-box').show();
        });

        $('.pop-close').bind('touchstart', function (e) {
            $('.pop-bg').removeClass('show');
            $('.pop-box').hide();
        });

        $('.game-start').bind('touchstart', function (e) {
            $('.index').hide();
            $('.game').hide();
            gameStartFun();
        });

        $('.play-again').bind('touchstart', function (e) {
            $('.results').hide();
            $('#failed').hide();
            init();
            gameStartFun();
        });
    });

    function takeScreenshot() {
        console.log('test');
        html2canvas(document.querySelector("#box"),{
            useCORS: true, //（图片跨域相关）
            allowTaint: true, //允许跨域（图片跨域相关）
            taintTest: true, //是否在渲染前测试图片
        }).then(canvas => {
            //$('.show_box').append("<img src='"+canvas.toDataURL()+"'/>");
            var img = document.querySelector('#target');
            img.src = canvas.toDataURL("image/png");
            $('#box').hide();
        });
    }

    let windowWidth = $(window).width();
    let badShowRound;
    let itemId = 0;
    let speed = 1000;
    let hitDown = 0;
    let leafMax = 20;
    let crowMax = 30;
    let cloudMax = 10;
    let sceneLevel = 1;

    function init() {
        itemId = 0;
        speed = 1000;
        hitDown = 0;
        leafMax = 20;
        crowMax = 30;
        cloudMax = 10;
        sceneLevel = 1;
        $('.game-bg-box').removeClass('up-one');
        $('.game-bg-box').removeClass('up-two');
        $('.game-bg-box').removeClass('paused');
        $('.flag-box').removeClass('over');
        $('.item').hide();
    }

    function gameStartFun() {
        $('.game').show();
        document.body.addEventListener('touchmove', touchMove, {passive: false});
        document.body.addEventListener('touchstart', touchStart, {passive: false});
        document.body.addEventListener('touchend', touchEnd, {passive: false});
        $('.game-tips-box').show();
        $('#tipsStart').show();
        setTimeout(function (e) {
            $('.game-tips-box').hide();
            $('#tipsStart').hide();
            $('#flag').bind('touchstart', flagTouchFunc);
        }, 3000);
    }

    function gameRound() {
        switch (sceneLevel) {
            case 1:
                if (itemId >= leafMax) clearInterval(badShowRound);
                let random = Math.floor(Math.random() * 4);
                let randomTop = Math.floor(Math.random() * 30) + (Math.round(Math.random()) * 70);
                let randomLeft = Math.floor(Math.random() * 100);
                let leftPosi = '0%';
                speed = (Math.random() * 1000) + 2000;
                if (random == 0) {
                    leftPosi = '50%';
                    $('.game').append('<img class="leaf right" id="' + itemId + '" src="images/leaf_img2.png" alt=""/>');
                    $('#' + itemId).css('top', randomTop + '%');
                } else if (random == 1) {
                    leftPosi = '43%';
                    $('.game').append('<img class="leaf left" id="' + itemId + '" src="images/leaf_img1.png" alt=""/>');
                    $('#' + itemId).css('top', randomTop + '%');
                } else if (random == 2) {
                    leftPosi = '50%';
                    $('.game').append('<img class="leaf top" id="' + itemId + '" src="images/leaf_img1.png" alt=""/>');
                    $('#' + itemId).css('left', randomLeft + '%');
                } else {
                    leftPosi = '50%';
                    $('.game').append('<img class="leaf bottom" id="' + itemId + '" src="images/leaf_img1.png" alt=""/>');
                    $('#' + itemId).css('left', randomLeft + '%');
                }
                $('#' + itemId).animate({left: leftPosi, top: '47%'}, {
                    duration: speed,
                    easing: 'linear',
                    step: function (now, fx) {
                        if (hitTestObject($(this), $('.fan'))) {
                            if ($(this).hasClass('hit')) return;
                            $(this).addClass('hit');
                            let left = '';
                            let top = '';
                            if (random == 0) {
                                top = randomTop + '%';
                                left = '100%';
                            } else if (random == 1) {
                                top = randomTop + '%';
                                left = '-20%';
                            } else if (random == 2) {
                                top = '-20%';
                                left = randomLeft + '%';
                            } else {
                                top = '100%';
                                left = randomLeft + '%';
                            }
                            leafDownFun($(this), left, top);
                        }
                    },
                    complete: function () {
                        console.log('gameOver!!');
                        gameOver();
                        $(this).remove();
                    }
                });
                itemId++;
                break;
            case 2:
                if (itemId >= crowMax) clearInterval(badShowRound);
                let random1 = Math.round(Math.random());
                let randomTop1 = Math.floor(Math.random() * 30) + (Math.round(Math.random()) * 70);
                let leftPosi1 = '0%';
                speed = (Math.random() * 1000) + 1000;
                if (random1 == 0) {
                    leftPosi1 = '50%';
                    $('.game').append('<div class="crow flex item-center right" id="' + itemId + '"><img src="images/hit.png" alt=""></div>');
                } else {
                    leftPosi1 = '43%';
                    $('.game').append('<div class="crow flex item-center left" id="' + itemId + '"><img src="images/hit.png" alt=""></div>');
                }
                $('#' + itemId).css('top', randomTop1 + '%');
                $('#' + itemId).animate({left: leftPosi1, top: '47%'}, {
                    duration: speed,
                    easing: 'linear',
                    step: function (now, fx) {
                        if (hitTestObject($(this), $('.glove'))) {
                            if ($(this).hasClass('hit')) return;
                            $(this).addClass('hit');
                            crowDownFun($(this));
                        }
                    },
                    complete: function () {
                        console.log('gameOver!!');
                        gameOver();
                        $(this).remove();
                    }
                });
                itemId++;
                break;
            case 3:
                if (itemId >= cloudMax) clearInterval(badShowRound);
                let random2 = Math.round(Math.random());
                let randomTop2 = Math.floor(Math.random() * 30);
                let leftPosi2 = '35%';
                speed = (Math.random() * 1000) + 3000;
                if (random2 == 0) {
                    $('.game').append('<img class="cloud right" id="' + itemId + '" src="images/cloud.gif" alt="" />');
                } else {
                    $('.game').append('<img class="cloud left" id="' + itemId + '" src="images/cloud.gif" alt="" />');
                }
                $('#' + itemId).css('top', randomTop2 + '%');
                $('#' + itemId).animate({left: leftPosi2}, {
                    duration: speed,
                    easing: 'linear',
                    step: function (now, fx) {
                        if ($('#bullet').length != 1) return;
                        if (hitTestObject($(this), $('#bullet'))) {
                            if ($(this).hasClass('hit')) return;
                            $(this).addClass('hit');
                            cloudDownFun($(this), $('#bullet'));
                        }
                    },
                    complete: function () {
                        console.log('gameOver!!');
                        //gameOver();
                        //$('#bullet').stop();
                        //$('#bullet').remove();
                        //$(this).remove();
                    }
                });
                itemId++;
                break
        }
    }

    function gameOver() {
        clearInterval(badShowRound);
        document.body.removeEventListener('touchmove', touchMove, {passive: false});
        document.body.removeEventListener('touchstart', touchStart, {passive: false});
        document.body.removeEventListener('touchend', touchEnd, {passive: false});
        $('.leaf').stop();
        $('.leaf').remove();
        $('.crow').stop();
        $('.crow').remove();
        $('.cloud').stop();
        $('.cloud').remove();
        $('#bullet').stop();
        $('#bullet').remove();
        $('.game').hide();
        $('.results').show();
        $('#failed').show();
    }

    function gameComplete() {
        document.body.removeEventListener('touchmove', touchMove, {passive: false});
        document.body.removeEventListener('touchstart', touchStart, {passive: false});
        document.body.removeEventListener('touchend', touchEnd, {passive: false});
        $('.game').hide();
        $('.results').show();
        $('#success').show();
    }

    function leafDownFun(obj, left, top) {
        hitDown++;
        $(obj).stop();
        $(obj).css('transform', 'scaleX(-1)');
        $(obj).animate({left: left, top: top}, {
            duration: 1000,
            easing: 'linear',
            complete: function () {
                $(this).remove();
            }
        });
        if (hitDown > leafMax) {
            sceneOneGameComplete();
        }
    }

    function crowDownFun(obj) {
        hitDown++;
        $(obj).stop();
        $(obj).addClass('down');
        $(obj).find('img').show();
        setTimeout(function () {
            $(obj).remove();
        }, 1000);
        if (hitDown > crowMax) {
            sceneTwoGameComplete();
        }
    }

    function cloudDownFun(obj, cloud) {
        hitDown++;
        if (hitDown > cloudMax) {
            sceneThreeGameComplete();
            return;
        }
        $(cloud).stop();
        $(cloud).remove();
        $(obj).stop();
        $(obj).attr('src', 'images/cloud_down.gif');
        setTimeout(function () {
            $(obj).remove();
            bulletConfirm = true;
        }, 1000);

    }

    function sceneOneGameComplete() {
        console.log('scene-one-complete!!');
        hitDown = 0;
        itemId = 0;
        $('.fan').hide();
        $('#completeText1').show();
        $('.complete-box').show();
        setTimeout(function () {
            $('#completeText1').fadeOut();
            $('.complete-box').fadeOut();
            setTimeout(function () {
                $('.game-tips-box').show();
                $('#tipsPointTwo').show();
                setTimeout(function (e) {
                    $('.game-tips-box').hide();
                    $('#tipsPointTwo').hide();
                    $('.glove').show();
                    sceneLevel = 2;
                    badShowRound = setInterval(gameRound, 300);
                }, 3000);
            }, 3000);
        }, 3000);
    }

    function sceneTwoGameComplete() {
        console.log('scene-two-complete!!');
        hitDown = 0;
        itemId = 0;
        $('.glove').hide();
        $('#completeText2').show();
        $('.complete-box').show();
        setTimeout(function () {
            $('#completeText2').fadeOut();
            $('.complete-box').fadeOut();
            setTimeout(function () {
                $('.game-tips-box').show();
                $('#tipsPointThree').show();
                setTimeout(function (e) {
                    $('.game-tips-box').hide();
                    $('#tipsPointThree').hide();
                    sceneLevel = 3;
                    gameRound();
                    badShowRound = setInterval(gameRound, 1500);
                }, 3000);
            }, 3000);
        }, 3000);
    }

    function sceneThreeGameComplete() {
        console.log('scene-Three-complete!!');
        $('.cloud').stop();
        $('.cloud').remove();
        $('#bullet').stop();
        $('#bullet').remove();
        $('#completeText3').show();
        $('.complete-box').show();
        setTimeout(function () {
            $('#completeText3').fadeOut();
            $('.complete-box').fadeOut();
            $('.flag-box').addClass('over');
            setTimeout(function () {
                $('.game-bg-box').addClass('paused');
                setTimeout(function () {
                    console.log('game all complete!!!!');
                    gameComplete();
                }, 2000);
            },1000);
        }, 3000);
    }

    function flagTouchFunc() {
        console.log('scene-one-start!!');
        $('#flag').unbind('touchstart', flagTouchFunc);
        $('.game-bg-box').addClass('up-one');
        setTimeout(function () {
            $('.game-tips-box').show();
            $('#tipsPointOne').show();
            $('.game-bg-box').addClass('up-two');
            setTimeout(function (e) {
                $('.game-tips-box').hide();
                $('#tipsPointOne').hide();
                $('.fan').show();
                sceneLevel = 1;
                badShowRound = setInterval(gameRound, 500);
            }, 3000);
        }, 5000);
    }

    let bulletConfirm = true;

    function touchStart() {
        let e = event || window.event;
        e.preventDefault();
        let touch = e.touches[0];
        let x = touch.pageX;
        if (sceneLevel == 3) {
            if (!bulletConfirm) return;
            bulletConfirm = false;
            $('.game').append('<img id="bullet" class="bullet" src="images/bullet_img.png" alt="">');
            $('#bullet').css('left', x + 'px');
            $('#bullet').animate({top: '-15%'}, {
                duration: 500,
                easing: 'linear',
                complete: function () {
                    bulletConfirm = true;
                    $(this).remove();
                }
            });
        }
    }

    function touchEnd() {
        let e = event || window.event;
        e.preventDefault();
    }

    function touchMove() {
        let e = event || window.event;
        e.preventDefault();
        let touch = e.touches[0];
        let x = touch.pageX;
        let y = touch.pageY;
        let item = sceneLevel == 1 ? $('.fan') : $('.glove');
        let itemWidth = item.width();
        let itemHeight = item.height();
        x < windowWidth / 2 ? item.css('transform', 'scaleX(-1)') : item.css('transform', 'scaleX(1)');
        item.css('left', (x - itemWidth / 2) + 'px');
        item.css('top', (y - itemHeight / 2) + 'px');
    }

    var hitTestObject = function (item, hitObj) {
        if (item == null || hitObj == null) return;
        var itemTop = item.offset().top,
            itemFoot = item.offset().top + parseInt(item.height()),
            itemLeft = item.offset().left,
            itemRight = item.offset().left + parseInt(item.width());
        var hitTop = hitObj.offset().top,
            hitFoot = hitObj.offset().top + parseInt(hitObj.height()),
            hitLeft = hitObj.offset().left,
            hitRight = hitObj.offset().left + parseInt(hitObj.width());
        if (itemFoot > hitTop && itemRight > hitLeft + 40 && itemTop < hitFoot && itemLeft < hitRight - 40) {
            return true;
        }
    };
</script>
</body>
</html>